<template>
	<view class="my-page">
		<z-paging ref="paging" v-model="dataList" @query="queryList" :default-page-size="10">
			<template #top>
				<view class="top-search">
					<view class="map">
						<up-icon name="map-fill" size="28"></up-icon>
					</view>
					<view class="search">
						<up-search
							v-model="searchText"
							borderColor="rgb(230, 230, 230)"
							bgColor="#ffffff"
							placeholder="请输入"
							:actionStyle="{ color: 'gray' }"
						></up-search>
					</view>
				</view>
			</template>
			<!-- 自定义下拉刷新view(如果use-custom-refresher为true且不设置下面的slot="refresher"，此时不用获取refresherStatus，会自动使用z-paging自带的下拉刷新view) -->
			<template #refresher="{ refresherStatus }">
				<custom-refresher :status="refresherStatus" />
			</template>
			<template #empty>
				<up-empty text="暂无数据" mode="order" textSize="15" />
			</template>
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<view class="item" v-for="(item, index) in dataList" :key="index">
				<view class="item-title">{{ item.title }}</view>
				<view class="item-detail">{{ item.detail }}</view>
				<view class="item-line"></view>
			</view>
		</z-paging>
	</view>
</template>

<script lang="ts" setup>
import { computed, ref, onMounted } from 'vue';
import request from '../../http/request.js';

const searchText = ref();
const paging = ref(null);
const dataList = ref([]);

onMounted(() => {});

// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
const queryList = (pageNo, pageSize) => {
	// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
	// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
	// 模拟请求服务器获取分页数据，请替换成自己的网络请求
	const params = {
		pageNo: pageNo,
		pageSize: pageSize,
		type: 1
	};
	request
		.queryList(params)
		.then((res) => {
			// 将请求的结果数组传递给z-paging
			paging.value.complete(res.data.list);
		})
		.catch((res) => {
			// 如果请求失败写paging.value.complete(false);
			// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
			// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
			paging.value.complete(false);
		});
};
</script>

<style>
page {
	background-color: #ffffff; /* 设置页面的背景色 */
}
</style>
<style lang="scss" scoped>
.my-page {
}
.top-search {
	display: flex;
	margin: 20rpx 20rpx 10rpx 20rpx;
	align-items: center;
	.search {
		flex: 1;
		margin-left: 5rpx;
	}
}
</style>
